<template>
  <div class="singer-album">
    <ul class="singer-videos">
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T015R640x360M10100214ztc0vJvCV.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="play-mask"></i>
          </div>
          <p>最伟大的作品 / Greatest Works of Art</p>
          <div class="album-date">播放量 4850.9万</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T015R640x360M10100214ztc0vJvCV.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="play-mask"></i>
          </div>
          <p>最伟大的作品 / Greatest Works of Art</p>
          <div class="album-date">播放量 4850.9万</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T015R640x360M10100214ztc0vJvCV.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="play-mask"></i>
          </div>
          <p>最伟大的作品 / Greatest Works of Art</p>
          <div class="album-date">播放量 4850.9万</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T015R640x360M10100214ztc0vJvCV.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="play-mask"></i>
          </div>
          <p>最伟大的作品 / Greatest Works of Art</p>
          <div class="album-date">播放量 4850.9万</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T015R640x360M10100214ztc0vJvCV.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="play-mask"></i>
          </div>
          <p>最伟大的作品 / Greatest Works of Art</p>
          <div class="album-date">播放量 4850.9万</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SingerVideo',
}
</script>

<script lang="ts" setup></script>

<style scoped>
.singer-album {
  margin-bottom: 10px;
}
.album-list {
  padding-bottom: 30px;
}
.album-list {
  display: inline-block;
  width: 20%;
}
.album-all {
  padding-right: 20px;
  font-size: 14px;
}
.album-all p {
  height: 23px;
  line-height: 23px;
  overflow: hidden;
}
.album-date {
  line-height: 22px;
  color: #999;
}
.album-top {
  position: relative;
  width: 224px;
  margin-bottom: 15px;
  cursor: pointer;
  overflow: hidden;
}
.album-top img {
  width: 100%;
  height: 100%;
  transition: all 0.8s;
}
.play-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  opacity: 0;
  background-image: url('../images/cover_play.56974e6f.png');
  transition: 0.3s;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;
  z-index: 999;
}

.album-top:hover .play-mask {
  opacity: 1;
  background-size: 76px 76px;
}
.album-top:hover img {
  transform: scale(1.07);
}
</style>
